<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环操作中引用类型的注意事项</title>
</head>
<body>
    
</body>
<script>
    /*
        前面我们学习了 值类型和引用类型的区别，  这点在循环操作中尤其要注意
            JS是越来越好用了  有很多很好用的方法
                像循环  当初我们比较好用的只有一个for循环  现在有 for in  for of循环
                for of循环 ------ 它的key属性代表的是数组里面的每一个元素  也就是每一条数据
                for in循环 ------ 它的key属性代表的是数组里面每一条数据的索引   也就是下标

        下面是例子
    */
    let lessons = [
        { name : 'Vue.js', price : '6666' },
        { name : 'Node.js', price : '7666' },
        { name : 'react.js', price : '8666' }
    ]
    /*
        循环操作有很多  有比较古老的for循环  比较新的 forof循环 和 forin 循环
    */
    for(let i = 0;i < lessons.length;i++){
        lessons[i].name = `Jimmy-${lessons[i].name}`
    }
    console.log(lessons)  //此时的结果是每一项的name属性中都添加了 Jimmy-

    // for of循环  
    /*
        for of循环时一个迭代器，它的key代码的是数组中的每一项内容  如果数组存放的是引用类型的数据，那么修改key会将原数组一起修改  如果是值类型，是不会跟着一起修改的
    */
    for (let iterator of lessons) {
        iterator.name = `${iterator.name}-hhh`
    }
    console.log(lessons)

    // 值类型情况
    let arr = [1,2,3,4,5]
    for (let iterator of arr) {
        iterator += 10
    }
    console.log(arr)  //[1, 2, 3, 4, 5]  
    /*
        可以看到 当使用for of的时候 如果数组存放的是值类型  修改Key是不会影响原数组的  因为这里的key是使用let创建的  相当于是重新开辟了内存空间   所以是不是影响原数组的
    */

    // for in 循环
    for (const key in lessons) {
        // for in循环的key 是数组的索引
        lessons[key].name = `heihei-${lessons[key].name}`
    }
    console.log(lessons)
</script>
</html>